<template>
  <div class="newsCompany">
    <!-- 头部 -->
    <InsideHeader :bannerType="bannerType"></InsideHeader>

    <!-- 面包屑 -->
    <!-- <crumb :titleOne="'最新资讯'" :titleTwo="'公司新闻'" :history="-1"></crumb> -->
    <div class="crumb">
      <div class="block">
        <div class="crumbL">
          <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
          <em>></em>
          <nuxt-link :to="{name: 'news-newsIndex'}">最新资讯</nuxt-link>
          <em>></em>
          <nuxt-link :to="{name: 'news-newsCompany'}" class="on">公司新闻</nuxt-link>
          <div class="clear"></div>
        </div>
        <!-- <div class="crumbR">
                <nuxt-link :to="{name: 'news-newsCompany'}">公司新闻</nuxt-link>
              <nuxt-link :to="{name: 'news-newProduct'}">新品发布</nuxt-link>
              <nuxt-link :to="{name: 'news-logUpdate'}">资料更新日志</nuxt-link>
                <div class="clear"></div>
        </div>-->
        <div class="clear"></div>
      </div>
    </div>

    <div class="block">
      <div class="content">
        <div class="title">
          <span>最新资讯</span>
        </div>
      </div>
      <!--最新资讯-->
      <div class="list" ref="scrollList">
        <ul>
          <li v-for="(item,index) in newlist" :key="index">
            <div class="left">
              <p>全部</p>
              <div class="circle">
                <div class="circle1"></div>
              </div>
              <div class="wire"></div>
            </div>
            <div class="right">
              <nuxt-link :to="{name: 'news-newsDetails',query:{id:item.oid}}">
                <div class="imgBox">
                  <img :src="item.mainPhoto" />
                </div>
                <div class="center">
                  <div class="title">{{item.title}}</div>
                  <div class="wire"></div>
                  <div class="msg">
                    <p>{{item.description}}</p>
                  </div>
                  <div class="time">{{item.createTime}}</div>
                </div>
                <div class="arrows"></div>
              </nuxt-link>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 链接 -->
    <Insidelink></Insidelink>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import $ from "jquery";
import "@/assets/css/news.css";
import InsideHeader from "@/components/head";
import HomeHooter from "@/components/footer";
import crumb from "@/components/crumb";
import Insidelink from "@/components/link";

export default {
  name: "newsCompany",
  components: {
    InsideHeader,
    HomeHooter,
    crumb,
    Insidelink
  },
  data() {
    return {
      bannerType:'news',
      reverse: true,
      list: [
        {
          timeline: "全部",
          img: require("../../static/newsImg/list1.png"),
          title: "三菱电机荣登 “2019世界智能制造十大科技进展”榜单",
          content:
            "10月17日，由江苏省人民政府、工业和信息化部、中国工程院、中国科学技术协会共同主办的2019世界智能制造大会在南京拉开帷幕。",
          time: "2019-01-31"
        },
        {
          timeline: "2019.01",
          img: require("../../static/newsImg/list2.jpg"),
          title: "  重磅！三菱电机激光加工自动化分拣系统正式在中国发售",
          content:
            "本次展会上，三菱电机激光加工自动化分拣系统终于揭开神秘面纱，首次在中国展出。“GX系列光纤激光加工机+自动分拣系统ASTES4",
          time: "2019-01-27"
        },
        {
          timeline: "2019.02",
          img: require("../../static/newsImg/list3.jpg"),
          title: "  新· 向未来 | 三菱电机2019工博会开启智能制造新篇章",
          content:
            "2019年9月17日-21日，三菱电机以全新产品阵容助阵工博会，在国家会展中心（上海·虹桥）的IAS/6.1H B172和MW",
          time: "2019-01-27"
        },
        {
          timeline: "2019.03",
          img: require("../../static/newsImg/list4.jpg"),
          title: "  2019工博会 | 三菱电机智能制造新跃升",
          content:
            "三菱电机国内首次展出众多优势新品，e-F@ctory智能制造解决方案不断升级。人工智能、边缘计算、云端融合... 先进科技支持",
          time: "2019-01-27"
        },
        {
          timeline: "2019.04",
          img: require("../../static/newsImg/list5.jpg"),
          title: "  第十三届“三菱电机杯“全国大学生电气与自动化大赛逐梦未来",
          content:
            "在新一轮科技革命和产业革命浪潮下，发掘经济发展新动能、促进社会可持续发展，“新工科”体系建设和“新工科”人才培养迫在眉睫。三菱",
          time: "2019-01-27"
        }
      ],
      newlist: [], //公司新闻
      page: 1,
      isKaiGuan: true
    };
  },
  mounted() {
    if (this.$route.path == "/news/newsCompany") {
      this.$refs.scrollList.addEventListener("scroll", this.menu);
    } else {
      window.addEventListener("scroll", "");
    }
  },
  methods: {
    // 公司新闻
    newList() {
      let id = this.$axios,
        params = {
          page: this.page,
          type: 2,
          limit: 10,
          title: ""
        };
      this.$api.homeindex.newlist(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          if (result.data.data.length < 8) {
            this.isKaiGuan = false;
          } else {
            this.isKaiGuan = true;
          }

          if (this.page != 1) {
            this.newlist = this.newlist.concat(result.data.data);
          } else {
            this.newlist = result.data.data;
          }
        }
      });
    },

    menu() {
      if (this.isKaiGuan) {
        let scroll =
          this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
        if (scroll === 0) {
          this.page++;
          this.newList();
        }
      }
    },
    //滚动条在Y轴上的滚动距离
    getScrollTop() {
      var documentScrollTop = 0;
      documentScrollTop = this.$refs.scrollList.scrollTop;
      return documentScrollTop;
    },
    //文档的总高度
    getScrollHeight() {
      var documentScrollHeight = 0;
      documentScrollHeight = this.$refs.scrollList.scrollHeight;
      return documentScrollHeight;
    },
    //浏览器视口的高度
    getWindowHeight() {
      var windowHeight = 0;
      windowHeight = this.$refs.scrollList.clientHeight;
      return windowHeight;
    }
  },
  created() {
    //公司新闻
    this.newList();
  }
};
</script>

<style scoped>
.list {
  height: 800px;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
